<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>性别比例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <style>
        #genderChart {
            width: 500px;
            height: 200px;
            margin: 40px auto;
            display: flex;
            align-items: center;
        }
        #chartContainer {
            width: 200px;
            height: 200px;
        }
        .gender-legend {
            margin-left: 20px;
            font-size: 16px;
        }
        .legend-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .legend-color {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }
        .legend-text {
            flex: 1;
            display: flex;
            justify-content: space-between;
            width: 180px;
        }
    </style>
</head>
<body>

<div id="genderChart">
    <div id="chartContainer"></div>
    <div class="gender-legend">
        <div class="legend-item">
            <div class="legend-color" style="background:#3398DB;"></div>
            <div class="legend-text">
                <span>男性</span><span>158&nbsp;&nbsp;|&nbsp;&nbsp;48.6%</span>
            </div>
        </div>
        <div class="legend-item">
            <div class="legend-color" style="background:#4cd964;"></div>
            <div class="legend-text">
                <span>女性</span><span>167&nbsp;&nbsp;|&nbsp;&nbsp;51.4%</span>
            </div>
        </div>
    </div>
</div>

<script>
    const genderChart = echarts.init(document.getElementById('chartContainer'));

    genderChart.setOption({
        title: {
            text: '性别比例',
            left: 'center',
            top: 'center',
            textStyle: {
                fontSize: 16,
                color: '#666'
            }
        },
        series: [{
            type: 'pie',
            radius: ['65%', '80%'],
            avoidLabelOverlap: false,
            label: { show: false },
            data: [
                { value: 158, name: '男性', itemStyle: { color: '#3398DB' }},
                { value: 167, name: '女性', itemStyle: { color: '#4cd964' }}
            ]
        }]
    });
</script>

</body>
</html>
